<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扁平垂直下拉菜单</title>
    <link href="css/flexy-menu.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <style>
        body{
            background: #fff url(img/texture.png) 
        repeat;margin: 0;padding: 0;
        }
        .content{
            margin: 0px 50px 0px 50px;
        }
        .flexy-menu{
            margin: 50px 0 0 0;
        }
        a.back{
            display: inline-block;
            text-decoration: none;
            color: #fff;margin: 50px auto;
            padding: 10px 30px;
            background: #333;
            font-family: Segoe UI;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/flexy-menu.js"></script>
    <script type="text/javascript">$(document).ready(function(){$(".flexy-menu").flexymenu({speed: 400});});</script>
</head>
<body>
<div class="content">
    <ul class="flexy-menu orange">
        <li class="active"><a href="JavaScript:void(0)"><i class="icon-heart">
        </i>Home</a></li>
        <li><a href="JavaScript:void(0)"><i class="icon-cogs"></i>Services</a></li>
        <li><a href="JavaScript:void(0)"><i class="icon-th"></i>Portfolio</a><ul>
            <li><a href="JavaScript:void(0)">Dropdown item</a></li>
            <li><a href="JavaScript:void(0)">Dropdown item</a></li>
            <li><a href="JavaScript:void(0)">Dropdown item</a><ul>
                <li><a href="JavaScript:void(0)">Dropdown item</a></li>
                <li><a href="JavaScript:void(0)">Dropdown item</a></li>
                <li><a href="JavaScript:void(0)">Dropdown item</a><ul>
                    <li><a href="JavaScript:void(0)">Dropdown item</a></li>
                    <li><a href="JavaScript:void(0)">Dropdown item</a></li>
                    <li><a href="JavaScript:void(0)">Dropdown item</a></li>
                    <li><a href="JavaScript:void(0)">Dropdown item</a></li>
                </ul>
                </li>
                <li><a href="JavaScript:void(0)">Dropdown item</a></li>
            </ul>
            </li>
            <li><a href="JavaScript:void(0)">Dropdown item</a></li>
            <li><a href="JavaScript:void(0)">Dropdown item</a></li>
        </ul>
        </li>
        <li><a href="JavaScript:void(0)"><i class="icon-bullhorn"></i>Blog</a></li>
        <li><a href="JavaScript:void(0)"><i class="icon-envelope"></i>Contact</a></li>
    </ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both"><br>
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>